<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3.姓名案例_计算属性实现</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        姓：<input type="text" v-model:value="fristName"> <br>
        名：<input type="text" v-model:value="lastName"> <br>
        姓名：<span>{{fullName1}}</span> <br>
        姓名：<span>{{fullName1}}</span> <br>
        姓名：<span>{{fullName1}}</span> <br>

    </div>

    <script type="text/javascript">

        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    fristName: '张',
                    lastName: '三'
                }
            },
            methods: {
                fullName() {
                    return this.fristName + '-' + this.lastName;
                }
            },
            computed: {
                fullName1: {
                    //  当有人读取 fullName 时，get就会被调用。且返回值会作为 fullName1 的值
                    // get 调用的时机
                    // 1.首次会调用
                    // 2.依赖的值发生了变化
                    get() {
                        console.log('我好烦啊 get() 被调用了');
                        // return 'bujunjie is smart';
                        return this.fristName + '-' + this.lastName;
                    },
                    //  当 fullName1 被修改时 set 会被调用
                    set(evl) {
                        console.log('接收到的参数evl=', evl)
                        const arr = evl.split('-');
                        this.fristName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        });

    </script>
</body>

</html>